<template>
  <div ref="box" class="w-full h-full overflow-hidden box" v-epg-group>
    <div ref="child" class="childBox w-full h-full">
      <div class="w-full h-full" v-if="num == 0">
        <div class="header">
          <div class="head_con flex items-end justify-center">
            <span style="font-size: 24px; font-weight: 500">立体库可视化大屏展示</span>
          </div>
          <div class="time">
            {{ time }}
          </div>
        </div>
        <div class="container-box items-center w-full">
          <div style="flex: 1 1 0%" class="flex w-full">
            <div v-epg-item style="flex: 1 1 0%" class="h-full boxs-box relative" @click="onPageFullscreen(1)">
              <div class="h-full">
                <UiBydModelTitle :info="titleInfo1"></UiBydModelTitle>
                <div class="box_item">
                  <UiBydUtilize :info="utilizeInfo"></UiBydUtilize>
                </div>
              </div>
              <div class="fullscreen_" @click="onPageFullscreen(1)">
                <vui-icon icon="fullscreen-line" />
              </div>
            </div>
            <div v-epg-item style="flex: 2 1 0%" class="h-full boxs-box relative" @click="onPageFullscreen(2)">
              <div class="h-full">
                <UiBydModelTitle :info="titleInfo2"></UiBydModelTitle>
                <div class="box_item"><UiBydShipment class="relative" :info="shipmentInfo"></UiBydShipment></div>
              </div>
              <div class="fullscreen_" @click="onPageFullscreen(2)">
                <vui-icon icon="fullscreen-line" />
              </div>
            </div>
            <div v-epg-item style="flex: 1 1 0%" class="h-full boxs-box relative" @click="onPageFullscreen(3)">
              <div class="h-full">
                <UiBydModelTitle :info="titleInfo"></UiBydModelTitle>
                <div class="box_item"><UiBydMonitor :urls="monitorUrls"></UiBydMonitor></div>
              </div>
              <div class="fullscreen_" @click="onPageFullscreen(3)">
                <vui-icon icon="fullscreen-line" />
              </div>
            </div>
          </div>
          <div style="flex: 2 1 0%" class="flex w-full">
            <div v-epg-item style="flex: 3 1 0%" class="h-full boxs-box relative" v-if="num === 0 || num === 4" @click="onPageFullscreen(4)">
              <div class="h-full">
                <UiBydModelTitle :info="titleInfo3"></UiBydModelTitle>
                <div class="box_item box_zx"><UiBydInventory :info="inventoryInfo"></UiBydInventory></div>
              </div>
              <div class="fullscreen_" @click="onPageFullscreen(4)">
                <vui-icon icon="fullscreen-line" />
              </div>
            </div>
            <div v-epg-item style="flex: 1 1 0%" class="h-full boxs-box relative" v-if="num === 0 || num === 5" @click="onPageFullscreen(5)">
              <div class="h-full">
                <UiBydModelTitle :info="titleInfo4"></UiBydModelTitle>
                <div class="box_item">
                  <UiBydSwiper></UiBydSwiper>
                </div>
              </div>
              <div class="fullscreen_" @click="onPageFullscreen(5)">
                <vui-icon icon="fullscreen-line" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="w-full h-full">
        <div class="w-full h-full relative" v-if="num === 1" @click="unFullscreen()" v-epg-item>
          <UiBydModelTitle :info="titleInfo1"></UiBydModelTitle>
          <div class="box_item">
            <UiBydUtilize :info="utilizeInfo" ref="fullUt" :full="num"></UiBydUtilize>
          </div>
          <div class="fullscreen_ show_" @click="unFullscreen()">
            <vui-icon icon="fullscreen-line" />
          </div>
        </div>
        <div class="w-full h-full relative" v-if="num === 2" @click="unFullscreen()" v-epg-item>
          <UiBydModelTitle :info="titleInfo2"></UiBydModelTitle>
          <div class="box_item"><UiBydShipment :info="shipmentInfo"></UiBydShipment></div>
          <div class="fullscreen_ show_" @click="unFullscreen()">
            <vui-icon icon="fullscreen-line" />
          </div>
        </div>
        <div class="w-full h-full" v-if="num === 3" @click="unFullscreen()" v-epg-item>
          <UiBydModelTitle :info="titleInfo"></UiBydModelTitle>
          <div class="box_item"><UiBydMonitor :urls="monitorUrls"></UiBydMonitor></div>
          <div class="fullscreen_ show_" @click="unFullscreen()">
            <vui-icon icon="fullscreen-line" />
          </div>
        </div>
        <div class="w-full h-full" v-if="num === 4" @click="unFullscreen()" v-epg-item>
          <UiBydModelTitle :info="titleInfo3"></UiBydModelTitle>
          <div class="box_item box_zx"><UiBydInventory :info="inventoryInfo"></UiBydInventory></div>
          <div class="fullscreen_ show_" @click="unFullscreen()">
            <vui-icon icon="fullscreen-line" />
          </div>
        </div>
        <div class="w-full h-full" v-if="num === 5" @click="unFullscreen()" v-epg-item>
          <UiBydModelTitle :info="titleInfo4"></UiBydModelTitle>
          <div class="box_item">
            <UiBydSwiper></UiBydSwiper>
          </div>
          <div class="fullscreen_ show_" @click="unFullscreen()">
            <vui-icon icon="fullscreen-line" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { translateTitle } from '@/utils/i18n'
  import { defineComponent } from 'vue'
  import { UiMixin, ChartMixin } from '@ve/mixin'
  import UiBydMonitor from './bydPage/uiBydMonitor.vue'
  import UiBydModelTitle from './bydPage/uiBydModelTitle.vue'
  import UiBydInventory from './bydPage/uiBydInventory.vue'
  import UiBydShipment from './bydPage/uiBydShipment.vue'
  import UiBydUtilize from './bydPage/uiBydUtilize.vue'
  import UiBydSwiper from './bydPage/uiBydSwiper.vue'
  import { useVuEPG } from '@/common/project/bootstrap/vueEpg/index'
  const title = {
    _id: 'uiBydModelTitle_3bsphr',
    extension: {
      title: {
        type: 'exInput',
        name: '标题',
        value: '立体库监控视频',
        tooltip: '',
      },
      fontColor: {
        type: 'exSetChartColor',
        name: '字体颜色',
        value: '#fff',
      },
    },
  }
  export default defineComponent({
    name: 'UiBydPage',
    components: { UiBydMonitor, UiBydModelTitle, UiBydInventory, UiBydShipment, UiBydUtilize, UiBydSwiper },
    mixins: [UiMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
      showFullScreen: { default: false },
    },
    data() {
      return {
        num: 0,
        time: '',
        timer: null,
        timer1: null,
        dateCenter: true,
        titleInfo: {
          _id: 'uiBydModelTitle_3bsphr',
          extension: {
            title: {
              type: 'exInput',
              name: '标题',
              value: '立体库监控视频',
              tooltip: '',
            },
            fontColor: {
              type: 'exSetChartColor',
              name: '字体颜色',
              value: '#fff',
            },
          },
        },
        titleInfo1: {
          _id: 'uiBydModelTitle_3bspha',
          extension: {
            title: {
              type: 'exInput',
              name: '标题',
              value: '立体库储位利用率',
              tooltip: '',
            },
            fontColor: {
              type: 'exSetChartColor',
              name: '字体颜色',
              value: '#fff',
            },
          },
        },
        titleInfo2: {
          _id: 'uiBydModelTitle_3bsphb',
          extension: {
            title: {
              type: 'exInput',
              name: '标题',
              value: '出货信息（单位：万）',
              tooltip: '',
            },
            fontColor: {
              type: 'exSetChartColor',
              name: '字体颜色',
              value: '#fff',
            },
          },
        },
        titleInfo3: {
          _id: 'uiBydModelTitle_3bsphc',
          extension: {
            title: {
              type: 'exInput',
              name: '标题',
              value: '近30天库存信息',
              tooltip: '',
            },
            fontColor: {
              type: 'exSetChartColor',
              name: '字体颜色',
              value: '#fff',
            },
          },
        },
        titleInfo4: {
          _id: 'uiBydModelTitle_3bsphd',
          extension: {
            title: {
              type: 'exInput',
              name: '标题',
              value: '人事统计',
              tooltip: '',
            },
            fontColor: {
              type: 'exSetChartColor',
              name: '字体颜色',
              value: '#fff',
            },
          },
        },
        inventoryInfo: {
          _id: 'uiBydInventory_mfgm0j',
          VERSION: '202300927',
          type: 'uiBydInventory',
          name: '比亚迪库存',
          icon: 'checkbox-blank-line',
          svg: 'kuwei_1',
          extension: {},
          interaction: [],
        },
        utilizeInfo: {
          _id: 'uiBydUtilize_kbtps5',
          VERSION: '202300927',
          type: 'uiBydUtilize',
          name: '比亚迪利用率',
          icon: 'checkbox-blank-line',
          svg: 'kuwei_1',
          extension: {},
          interaction: [],
        },
        monitorInfo: {
          _id: 'uiBydMonitor_4brrbu',
          VERSION: '202300927',
          type: 'uiBydMonitor',
          name: '比亚迪监控',
          icon: 'checkbox-blank-line',
          svg: 'kuwei_1',
          extension: {},
          interaction: [],
        },
        shipmentInfo: {
          _id: 'uiBydShipment_pb8eqa',
          VERSION: '202300927',
          type: 'uiBydShipment',
          name: '比亚迪出货',
          icon: 'checkbox-blank-line',
          svg: 'kuwei_1',
          extension: {},
          interaction: [],
        },
        monitorUrls: [],
      }
    },
    watch: {
      showFullScreen: {
        handler(val) {
          this.timer && clearTimeout(this.timer)
          this.timer = setTimeout(() => {
            if (val.value) {
              this.scalePreview(this.$refs.box.offsetWidth)
            } else {
              this.loadScalePreview(this.$refs.box.offsetHeight / 1080)
            }
          }, 500)
        },
        deep: true,
      },
    },
    mounted() {
      const epg = useVuEPG()
      console.log('epg======', epg)
      this.getTitle()
      this.timer && clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.time = this.getTitle()
      }, 1000)
      this.timer1 = null
      this.$nextTick(() => {
        let scale = Math.min(this.$refs.box.offsetWidth / 1920, this.$refs.box.offsetHeight / 1080)
        console.log(this.$refs.box.offsetWidth, this.$refs.box.offsetWidth / 1920, this.$refs.box.offsetHeight, this.$refs.box.offsetHeight / 1080)
        this.$refs.child.style.transform = `scale(${this.$refs.box.offsetWidth / 1920})`
        // this.$refs.child.style.transform = `scale(${1.35})`
        window.onresize = () => {
          this.timer1 && clearTimeout(this.timer1)
          this.timer1 = setTimeout(() => {
            console.log(this.$refs.box)
            let scale = Math.min(this.$refs.box.offsetWidth / 1920, this.$refs.box.offsetHeight / 1080)
            console.log('scale', scale)
            this.$refs.child.style.transform = `scale(${scale})`

            //全屏根据比例缩放
            // if (innerHeight != window.innerHeight || !this.showFullScreen.value) {
            //   this.scalePreview(this.$refs.box.offsetWidth)
            // } else {
            //   if (this.conWidth > this.$refs.box.offsetWidth) {
            //     this.scalePreview(this.$refs.box.offsetWidth)
            //   } else {
            //     this.loadScalePreview(scale)
            //   }
            // }
          }, 500)
        }
      })
      // const epg = useVuEPG()
      // epg.onBack(() => {
      //   console.log('单页面返回回调')
      // })
      // document.onkeydown = (event) => {
      //   console.log('onkeydown', event.code, event.which, event.keyCode)
      // }
      // document.addEventListener('keydown', (event) => {
      //   console.log('onkeydown', event.code, event.which, event.keyCode)
      // })
      // document.onkeydown = (event) => {
      //   console.log(event.code, event.which, event.keyCode)
      // }
      // this.info.extension.url1
      // console.log(this.info.extension.url1)
      this.monitorUrls = [
        this.info.extension.url1.value || '',
        this.info.extension.url2.value || '',
        this.info.extension.url3.value || '',
        this.info.extension.url4.value || '',
        this.info.extension.url5.value || '',
        this.info.extension.url6.value || '',
      ]
    },
    unmounted() {
      this.timer && clearInterval(this.timer)
      this.timer1 && clearInterval(this.timer1)
    },
    created() {
      console.log(this.info)
    },
    methods: {
      onPageFullscreen(num) {
        const epg = useVuEPG()
        this.num = num
        this.$nextTick(() => {
          epg.moveToItem(epg.getItems()[0])
        })
      },
      unFullscreen() {
        const epg = useVuEPG()
        const oldNum = this.num
        this.num = 0
        this.$nextTick(() => {
          epg.moveToItem(epg.getItems()[oldNum - 1])
        })
      },
      translateTitle,
      getTitle() {
        let date = new Date()
        let week = ''
        switch (date.getDay()) {
          case 1:
            week = this.translateTitle('Ve.layout.星期一')
            break
          case 2:
            week = this.translateTitle('Ve.layout.星期二')
            break
          case 3:
            week = this.translateTitle('Ve.layout.星期三')
            break
          case 4:
            week = this.translateTitle('Ve.layout.星期四')
            break
          case 5:
            week = this.translateTitle('Ve.layout.星期五')
            break
          case 6:
            week = this.translateTitle('Ve.layout.星期六')
            break
          case 0:
            week = this.translateTitle('Ve.layout.星期日')
            break
        }
        return (
          `${date.getFullYear()}${this.dateCenter ? '-' : this.translateTitle('Ve.layout.年') + ' '}${
            date.getMonth() >= 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
          }${this.dateCenter ? '-' : this.translateTitle('Ve.layout.月') + ' '}${date.getDate() >= 10 ? date.getDate() : '0' + date.getDate()}${
            this.dateCenter ? '' : this.translateTitle('Ve.layout.日') + ' '
          } ${date.getHours() > 9 ? date.getHours() : '0' + date.getHours()}${this.dateCenter ? ':' : this.translateTitle('Ve.layout.时') + ' '}${
            date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()
          }${this.dateCenter ? ':' : this.translateTitle('Ve.layout.分')}${date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()}${
            this.dateCenter ? '' : this.translateTitle('Ve.layout.秒') + ' '
          }` + week
        )
      },
      loadScalePreview(scale) {
        this.$refs.child.style.transform = `scale(${scale})`
      },
      scalePreview(winWidth) {
        // this.winWidth = this.$refs.box.offsetWidth
        this.$refs.child.style.transform = `scale(${winWidth / 1920})`
      },
    },
  })
</script>
<style lang="scss" scoped>
  .box {
    display: flex;
    flex-direction: column;
    background-color: rgb(20, 44, 80);
  }
  .childBox {
    transition: all 0.5s;
    transform-origin: left top;
    width: 1920px;
    height: 1080px;
  }
  .header {
    height: 80px;
    width: 100%;
    position: relative;
    background: url('../pages/lcsMoudlePages/lcs.png') center center / contain no-repeat;
    // background-repeat: no-repeat;
    // background-size: contain;
    .head_con {
      position: absolute;
      width: 100%;
      height: 100%;
      color: #fff;
      left: 0;
      top: 0;
      padding: 0 0 12px;
      font-size: 28px;
      font-weight: bold;
      text-align: center;
    }
    .time {
      position: absolute;
      top: 0;
      right: 5%;
      margin: 0px;
      padding: 5px 0px 5px 7px;
      font-size: 20px;
      color: rgb(255, 255, 255);
      font-weight: 500;
      background-color: rgba(215, 203, 238, 0);
      border-radius: 0px;
      align-items: center;
    }
  }
  .container-box {
    height: calc(100% - 90px);
    & > div {
      height: 435px;
    }
  }
  .container-box div {
    // border: 1px solid #fff;
  }
  .boxs-box {
    padding: 5px;
    & > div {
      background-color: #0b2545;
    }
  }
  .boxs-box:hover .fullscreen_ {
    display: block;
  }
  .fullscreen_ {
    display: none;
    position: absolute;
    right: 10px;
    top: 10px;
    color: #fff;
    cursor: pointer;
  }
  .show_ {
    display: block;
  }
  .box_item {
    height: calc(100% - 42px);
  }
  // .box_zx {
  //   width: calc(100% - 12px);
  // }
  // .box_title {
  //   position: absolute;
  //   top: 0;
  // }
  .vuepg-focus {
    border: 1px solid red;
  }
</style>
